<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body
    x-data="{navOpen: false}"
    x-init="$refs.body.style.setProperty('--scrollbar-width', `${window.innerWidth - document.body.offsetWidth}px`)"
    x-ref="body"
  >
    {%- include aside.html -%}
    <div class="site-main">
      {%- include header.html -%}
      <main class="site-clamp" aria-label="Content">
        <header class="content-header">
          <h1 class="mb-16">{{ page.title }}</h1>
        </header>
        <div class="site-content has-toc">
          <aside class="table-of-contents flex flex-col">
            {% include status.html %}
            <div class="flex-auto rounded-lg p-4 border border-gray-400 overflow-auto">
              <p class="header-small uppercase">On this page</p>
              {% include toc.html html=content h_min=1 h_max=3 %}
            </div>
          </aside>
          <div class="content markdown">
            {{ content }}
            {%- include pagination.html -%}
          </div>
        </div>
      </main>
      {%- include footer.html -%}
    </div>
  </body>

</html>
